@import '~scss/variables';
@import '~scss/mixins';

.card {
  position: relative;
  min-height: 150px;
  margin-bottom: 12px;
  padding: 20px;
  border-radius: $border-radius;
  background-color: $white;
  transition: all $trans-speed;

  &.default {
    box-shadow: $card-shadow;

    &:hover {
      box-shadow: $card-hover-shadow;
    }
  }

  &.selector {
    border-radius: 4px;
    border: 1px solid $light-color03;

    &:hover {
      border-color: $border-color;
      box-shadow: $card-selector-shadow;
    }
  }

  :global {
    .table {
      &-footer {
        padding: 0 20px 16px;
        background-color: $white;
        box-shadow: none;
        border-radius: 0 0 $border-radius $border-radius;
      }
    }
  }
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}

.title {
  position: relative;
  height: 20px;
  margin-bottom: 20px;
  font-size: $size-normal;
  font-weight: 600;
  line-height: 1.43;
  @include clearfix;

  .operations {
    @include vertical-center;
    right: 0;
    z-index: 10;
  }
}

.empty {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 60px;
  bottom: 20px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: $light-color08;
  font-size: $size-medium;
  font-weight: 600;
  line-height: 1.5;
  background-color: $th-bg-color;
  border-radius: 4px;
}
